<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>随便打TCS系统</title>
    <!-- Bootstrap -->
    <link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link
            href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet">
    <!-- Select2 -->
    <link href="<%=basePath%>vendors/select2/dist/css/select2.min.css"
          rel="stylesheet">
    <!-- NProgress -->
    <link href="<%=basePath%>vendors/nprogress/nprogress.css"
          rel="stylesheet">
    <!-- iCheck -->
    <link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
          rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link
            href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
            rel="stylesheet">
    <!-- JQVMap -->
    <link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
          rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link
            href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
            rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">

    <!-- 富文本  -->
    <link href="<%=basePath%>static/css/quill.snow.css" rel="stylesheet">
    <link href="<%=basePath%>Content/Layui-KnifeZ/css/layui.css" rel="stylesheet"/>

</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="clearfix"></div>
                <br/>
            </div>
        </div>

        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left">
                        <h3>新手课堂</h3>
                    </div>


                </div>
                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>创建一个新手课堂</h2>

                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <form name="myForm" class="form-horizontal form-label-left"
                                      novalidate method="post" enctype="multipart/form-data"
                                      id="formUpload">

                                    <p>
                                        您需要将以下内容填写完整后才可以创建模块，如有疑问请
                                        <code>联系客服</code>
                                        以帮助您完成相关配置以及信息完善
                                    </p>
                                    <span class="section">基本信息</span>
                                    <%--<div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="name">代理商 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="goodstext" class="form-control col-md-7 col-xs-12"
                                                   name="goodstext" placeholder="请输入文字" required="required"
                                                   type="text" value="">
                                        </div>
                                    </div>--%>

                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="name">标题<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="ncTitle" class="form-control col-md-7 col-xs-12"
                                                   name="ncTitle" placeholder="请输入文字" required="required"
                                                   type="text" value="">
                                        </div>
                                    </div>

                                    <div class="item form-group" id="pic">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="name">图片<span class="required">*</span>
                                        </label>

                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input class="form-control col-md-7 col-xs-12" id="ncPic"
                                                   name="ncPic" required="required" type="file"
                                                   placeholder="请先上传图片" form="formUpload">
                                        </div>
                                        <span id="button1"><a type="button" class="btn btn-default"
                                                              href="javascript:void(0)">添加</a></span>
                                    </div>


                                    <%--									<div class="item form-group">--%>
                                    <%--										<label class="control-label col-md-3 col-sm-3 col-xs-12"--%>
                                    <%--											   for="name">内容详情<span class="required">*</span>--%>
                                    <%--										</label>--%>
                                    <%--										<div class="col-md-6 col-sm-6 col-xs-12">--%>
                                    <%--											<div id="standalone-container">--%>
                                    <%--												<div id="toolbar-container">--%>
                                    <%--												<span class="ql-formats">--%>
                                    <%--												<!-- <select class="ql-font"></select> -->--%>
                                    <%--												<select class="ql-size"></select>--%>
                                    <%--												</span>--%>
                                    <%--													<span class="ql-formats">--%>
                                    <%--												<button class="ql-list" value="ordered"></button>--%>
                                    <%--												</span>--%>
                                    <%--													<span class="ql-formats">--%>
                                    <%--												<select class="ql-align"></select>--%>
                                    <%--												</span>--%>
                                    <%--													<span class="ql-formats">--%>
                                    <%--												<button class="ql-image"></button>--%>
                                    <%--												</span>--%>
                                    <%--												</div>--%>
                                    <%--												<div id="editor-container" style="height:400px"></div>--%>
                                    <%--											</div>--%>
                                    <%--										</div>--%>
                                    <%--									</div>--%>

                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                               for="layeditDemo">内容详情<span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <div>
                                                <textarea id="layeditDemo" lay-verify="content"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ln_solid"></div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-md-offset-3">
                                            <a type="submit" class="btn btn-primary"
                                               href="javascript:void(0)"
                                               onclick="history.back(-1);">取消</a>
                                            <input id="add" type="button" class="btn btn-success"
                                                   value="发布">

                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 富文本 -->
        <script src="<%=basePath%>static/js/katex.min.js"></script>
        <script src="<%=basePath%>static/js/highlight.min.js"></script>
        <script src="<%=basePath%>static/js/quill.js"></script>
        <script src="<%=basePath%>static/js/quill.min.js"></script>
        <!-- Initialize Quill editor -->
        <script src="<%=basePath%>static/js/jquery-1.7.1.min.js"></script>
        <script>
            var quill = new Quill('#editor-container', {
                modules: {
                    formula: true,
                    syntax: true,
                    toolbar: '#toolbar-container'
                },
                placeholder: '请输入内容',
                theme: 'snow'
            });
        </script>

        <!-- 上传图片并添加-->
        <script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
        <script>
            $("#button1").click(function () {
                $("#button1").css("display", "none");
                $("#ncPic").css("display", "block");
            });
        </script>
        <script type="text/javascript">
            $('#add').click(function () {
                // 上传文件
                var detailpic = $("#ncPic")[0].files[0];

                var pic = "";


                if (detailpic != null || detailpic != undefined) {
                    var fileName = detailpic.name.substring(detailpic.name.lastIndexOf(".") + 1).toLowerCase();
                    if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic = addfile(detailpic);
                } else {
                    alert("请添加图片");
                    return false;
                }


                ajaxPost(pic);
            });

            function addfile(file) {
                var fm = new FormData();
                fm.append('file', file);
                $.ajax({
                    url: "<%=basePath%>layfile/uploadFile1",
                    type: 'POST',
                    data: fm,
                    async: false,
                    contentType: false, //禁止设置请求类型
                    processData: false, //禁止jquery对DAta数据的处理,默认会处理
                    //禁止的原因是,FormData已经帮我们做了处理
                    success: function (result) {
                        file = result.json;
                    }
                });
                return file;
            }
        </script>

        <script type="text/javascript">
            // ajax 对象
            function ajaxObject() {
                var xmlHttp;
                try {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            alert("您的浏览器不支持AJAX！");
                            return false;
                        }
                    }
                }
                return xmlHttp;
            }


            // ajax post请求：
            function ajaxPost(ncPic) {
                var ncTitle = $("#ncTitle").val(); // 获取标题内容
                var ncContent = $('#LAY_layedit_1').contents().find("body").html();
                // encodeURIComponent($(".ql-editor").html());//获取富文本内容
                var ajax = ajaxObject();
                ajax.open("post", "addTNoviceList?ncTitle=" + ncTitle +
                    "&ncContent=" + ncContent +   //添加内容
                    "&ncPic=" + ncPic    //添加图片
                    , true);
                ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                ajax.onreadystatechange = function () {
                    if (ajax.readyState == 4) {
                        if (ajax.status == 200) {
                            var result = ajax.responseText;
                            if (result == "1") {
                                //请求成功
                                location.href = "noviceListIndex";
                            }
                            if (result == "-1") {
                                alert("登录超时，请重新登录");
                                top.location.href = "login/${titleId}";
                            }
                            if (result == "-2") {
                                alert("已经存在此任务类型，请勿重复添加");
                            }
                        } else if (ajax.status == 0) {
                            //请求失败
                            alert("您使用的火狐浏览器不支持本次操作，请更换浏览器重试");
                        } else {
                            //请求失败
                            alert("请求终止，请检查操作或联系客服咨询" + ajax.status);
                        }
                    } else {
                    }
                };
                ajax.send();

            }

        </script>
    </div>
</div>

<!-- jQuery -->
<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
<script
        src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>
<!-- validator -->
<script src="<%=basePath%>vendors/validator/validator.js"></script>
<!-- Custom Theme Scripts -->
<script src="<%=basePath%>build/js/custom.min.js"></script>
<!-- Select2 -->
<script src="<%=basePath%>vendors/select2/dist/js/select2.full.min.js"></script>
<script src="<%=basePath%>Content/Layui-KnifeZ/layui.js"></script>
<script src="<%=basePath%>Content/ace/ace.js"></script>
<script>
    console.log("nihao");
    layui.use(['layedit', 'layer', 'jquery'], function () {
        var $ = layui.jquery;
        var layedit = layui.layedit;
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '<%=basePath%>layfile/uploadFile1',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/Attachment/LayUploadFile',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: false
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
                , '|', 'fullScreen'
            ]
            , height: '90%'
        });
        var ieditor = layedit.build('layeditDemo');

        form.verify({
            content: function (value) {
                return layedit.sync(ieditor);
            }
        });

    })
</script>
</body>
</html>